<template>
  <div>
    <m-attr-tip type="itemflow"/>
    <div class="attribute ov">
      <div class="attr-left">
        <attr-nav 
          :dataList="dataList" 
          :activeIndex="activeIndex" 
          :showTriangle=false
          @click="handleClick"
        >
        </attr-nav>
      </div>
      <div class="attr-right">
        <keep-alive>
          <component
            :is="tableType"
            ref="comp"
            mode="detail"
            :elementId="elementId"
            confirmMode='true'
            style="height:238px;margin-bottom:50px"            
          ></component>
        </keep-alive>
      </div>
    </div>
  </div>
</template>
<script>
//// import { FlowTable, AttrList, AttrNav } from '../exportIndex';
import  FlowTable from './FlowTable';
import AttrList from './WizardAttrList';
import AttrNav from './AttrNav';
import AttrTip from '../comps/AttrTip';
export default {
  name: 'attribute',
  components: {
    FlowTable,
    AttrList,
    "attr-nav": AttrNav,
    'm-attr-tip': AttrTip,
  },
  props: {
    elementId: String

  },
  data() {
    return {
      dataList: [
        { name: "创建新的或选择存在对象流", key: 'AttrList', value: "Block", type: "settingsAttribute" }
        //// { name: "2.指定的活动", key: 'AttrList', value: "", type: "settingsAttribute" }
        /* { name: "约束属性", key: '', value: "", type: "settingsAttribute" },
        { name: "流属性", key: 'FlowTable', value: "FlowProperty", type: "settingsAttribute" },
        { name: "部件属性", key: '', value: "", type: "settingsAttribute" },
        { name: "引用属性", key: '', value: "", type: "settingsAttribute" },
        { name: "约束表达式", key: '', value: "", type: "settingsAttribute" },
        { name: "操作", key: '', value: "", type: "settingsAttribute" },
        { name: "接收", key: '', value: "", type: "settingsAttribute" },
        { name: "端口", key: '', value: "", type: "settingsAttribute" },
        { name: "流端口", key: '', value: "", type: "settingsAttribute" },
        { name: "完整端口", key: '', value: "", type: "settingsAttribute" },
        { name: "值属性", key: '', value: "", type: "settingsAttribute" } */
      ],
      activeIndex: 0,
    };
  },
  computed: {
    tableType() {
      let type = "FlowTable";
      type = this.dataList[this.activeIndex].key;
      return type;
    },
  },
  methods: {
    handleClick(index) {

      this.activeIndex = index;
    },
    //// handleNumClick(value) {
    ////   value === 0 ? this.activeIndex ++ : this.activeIndex--
    ////   if( this.activeIndex <= 0 ) {
    ////     this.activeIndex = 0
    ////   }else if( this.activeIndex >= this.dataList.length -1  ) {
    ////     this.activeIndex = this.dataList.length -1
    ////   }
    //// }
  },
};
</script>
<style lang="scss" scoped>
.attribute {
  position: relative;
  display: flex;
  .attr-left {
    width: 195px;
  }
  .attr-right {
    flex: 1;
  }
}
</style>
